<%--
  Created by IntelliJ IDEA.
  User: yz_yang
  Date: 2019/7/9
  Time: 16:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>TypeList</title>
    <link href="../../resources/css/buttons.css" rel="stylesheet" >
    <link href="../../resources/css/typeList.css" rel="stylesheet">
    <link href="../../resources/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="../../resources/css/theme.css" rel="stylesheet">
    <link href="../../resources/css/lib/jquery-confirm.min.css" rel="stylesheet">

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand">
                Type Of Puzzles<c:out value="${problemInf.no}"></c:out>
            </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <form:form method="post" modelAttribute="userInf">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/tutorial">Tutorial</a></li>
                    <form:form method="post" modelAttribute="userInf">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a title="${userInf.email}">${userInf.username}</a></li>
                            <li><a href="/exit">Logout</a></li>
                        </ul>
                    </form:form>
                </ul>
            </form:form>
        </div>
    </div>
</nav>

<div style="display: flex; align-items: center">
    <input id="button-math" type="button" class="button-glow button-inverse button-basic" style="position: absolute;left: 8%" value="Math"  onclick="urlLoad('math')">
    <input id="button-string" type="button" class="button-glow button-inverse button-basic" style="position: absolute;left: 31%" value="String"  onclick="urlLoad('string')">
    <input id="button-array" type="button" class="button-glow button-inverse button-basic" style="position: absolute;left: 54%" value="Array"  onclick="urlLoad('array')">
    <input id="button-graph" type="button" class="button-glow button-inverse button-basic" style="position: absolute;left: 77%" value="Graph" onclick="urlLoad('graph')">
</div>

<div class="tutorialBackground" id="tutorialBackground"></div>

<div class="pages" id="pages">
    <div id="nextButton" onclick="nextPage()">>>></div>

    <div class="pageWord" id="page0">Welcome to our game!<br/>There are various algorithmic puzzles in the website, including math puzzles, graph puzzles and so on. </div>
    <div class="pageWord" id="page1">What we do with these puzzles is something like looking for patterns.</div>
    <div class="pageWord" id="page2">As we all know, in general, outputs of programs are determined by their corresponding inputs.</div>
    <div class="pageWord" id="page3">We can infer that when there are some connections between inputs, there may be some connections between corresponding outputs.</div>
    <div class="pageWord" id="page4">Now let's start!<br/>First choose the type of puzzles.</div>
</div>

<div class="arrow" id="arrow"></div>
<div id="page4-1">Click here to choose the math type.</div>


<script>
    if(${userInf.passTutorial==0}){
        document.getElementById('tutorialBackground').style.display="";
        document.getElementById('nextButton').style.display="";
        document.getElementById('page0').style.display="";
        document.getElementById('page1').style.display="none";
        document.getElementById('page2').style.display="none";
        document.getElementById('page3').style.display="none";
        document.getElementById('page4').style.display="none";
        document.getElementById('page4-1').style.display="none";
        document.getElementById('arrow').style.display="none";
    }
    else{
        document.getElementById('tutorialBackground').style.display="none";
        document.getElementById('pages').style.display="none";
        document.getElementById('page4-1').style.display="none";
        document.getElementById('arrow').style.display="none";
    }
    tutorialNum=0;
</script>

<script type="text/javascript">
    function urlLoad(no) {
        document.location.href="puzzleType/"+no;
    }
</script>

<script type="text/javascript">
    function nextPage() {
        tutorialNum++;
        if(1==tutorialNum){
            document.getElementById('page0').style.display="none";
            document.getElementById('page1').style.display="";
        }
        else if(2==tutorialNum){
            document.getElementById('page1').style.display="none";
            document.getElementById('page2').style.display="";
        }
        else if(3==tutorialNum){
            document.getElementById('page2').style.display="none";
            document.getElementById('page3').style.display="";
        }
        else if(4==tutorialNum){
            document.getElementById('page3').style.display="none";
            document.getElementById('page4').style.display="";
            document.getElementById('page4-1').style.display="";
            document.getElementById('arrow').style.display="";
            document.getElementById('nextButton').style.display="none";
            document.getElementById('button-math').style.zIndex=200;
        }
    }
</script>

</body>
</html>
